<template>
	<view class="mineBox">
		<navigator url="/subPages/seeting/seeting" open-type="navigate">
			<uni-nav-bar v-show="showNav">
				<view slot="left" style="margin-left: 50rpx;">
					<image style="width: 44upx; height: 44upx;" src="../../static/images/setup_b.png" mode=""></image>
				</view>
			</uni-nav-bar>
		</navigator>
		<view class="header">
			<view class="hbg">
				<image src="../../static/images/hbg.png" mode=""></image>
			</view>
			<view class="setting">
				<navigator url="/subPages/seeting/seeting" open-type="navigate">
					<image src="../../static/images/setup.png" mode=""></image>
				</navigator>
			</view>
			<!-- 个人信息卡片 -->
			<view class="personCard">
				<image class="personBox" src="../../static/images/ubg.png" mode=""></image>
				<view class="content">
					<image class="avater" src="../../static/images/nopic.png" mode=""></image>
					<view class="user">
						<view class="userName" v-if="userInfo">{{userInfo.name}}</view>
						<view class="userName" v-if="!loginState">未知用户</view>
						<view class="userDes">{{bio ? bio : '这个人有点懒，什么都没留下'}}</view>
					</view>
					<view class="btns">
						<navigator url="/subPages/seeting/seeting" open-type="navigate">
							<button type="default">
								<image class="icon" src="../../static/images/setup_b.png" mode=""></image>
								<text>个人设置</text>
							</button>
						</navigator>
						<button class="setCircle" type="default" @click="getMyInfo">
							<view class="circle">{{userInfo.liked}}</view>
							<image class="icon" src="../../static/images/bell.png" mode=""></image>
							<text>我的信息</text>
						</button>

					</view>
				</view>
			</view>
			<view class="helfCilcle"></view>
		</view>
		<view class="bottom">
			<u-waterfall v-model="feedList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="itemBox" v-for="(item, index) in leftList" :key="index">
						<navigator open-type="navigate" :url=" '/subPages/trendDetail/trendDetail?id=' + item.id">
							<u-image :src="item.image" :lazy-load="true" mode="widthFix"></u-image>
							<view class="btnConent">
								<view class="title">{{item.feed_content}}</view>
								<view class="btnIcon">
									<view class="icons">
										<view @click.stop="changeLove(item)">
											<image class="love" v-if="item.has_like" src="../../static/images/lover.png"
												mode=""></image>
											<image class="love" v-else src="../../static/images/love.png" mode="">
											</image>
										</view>
										<image class="mes" src="../../static/images/bell.png" mode=""></image>
									</view>
									<view class="more" @click.stop="openMore(item)">
										<image class="moreIcon" src="../../static/images/more.png" mode=""></image>
									</view>
								</view>
							</view>
						</navigator>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="itemBox" v-for="(item, index) in rightList" :key="index">
						<navigator open-type="navigate" :url=" '/subPages/trendDetail/trendDetail?id=' + item.id">
							<u-image :src="item.image" :lazy-load="true" mode="widthFix"></u-image>
							<view class="btnConent">
								<view class="title">{{item.feed_content}}</view>
								<view class="btnIcon">
									<view class="icons">
										<view @click.stop="changeLove(item)">
											<image class="love" v-if="item.has_like" src="../../static/images/lover.png"
												mode=""></image>
											<image class="love" v-else src="../../static/images/love.png" mode="">
											</image>
										</view>
										<image class="mes" src="../../static/images/bell.png" mode=""></image>
									</view>
									<view class="more" @click.stop="openMore(item)">
										<image class="moreIcon" src="../../static/images/more.png" mode=""></image>
									</view>
								</view>
							</view>
						</navigator>
					</view>
				</template>
			</u-waterfall>
		</view>
		<login v-if="!loginState" ref="login"></login>
		<share></share>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import {
		mapState
	} from 'vuex'
	import feedMixin from '@/components/mixins/feedMixin.js'
	export default {
		mixins: [feedMixin],
		data() {
			return {
				avatar: '',
				bio: '',
				feedList: [],
				showNav: false
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getUserInfo()
			uni.stopPullDownRefresh()
		},
		// 监听页面滚动
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.showNav = true
			} else {
				this.showNav = false
			}
		},
		onLoad() {
			this.getUserInfo(),
			// 用户登录后触发数据更新
			uni.$on('meUserLogin', () => {
				this.getUserInfo()
			})
			// 用户退出后触发数据更新
			uni.$on('meUserLogout', () => {
				this.avatar = '',
				this.bio =  '',
				this.feedList = [],
				this.$refs.uWaterfall.clear()
			})
			// 监听点赞或取消点赞事件，所发生的数据更新
			uni.$on('getMineFeed', item => {
				this.$refs.uWaterfall.modify(item.id, 'has_like', item.has_like)
				this.$refs.uWaterfall.modify(item.id, 'like_count', item.like_count)
			})
			// 监听发布动态后数据的更新
			uni.$on('getMineFeedList', ()=>{
				this.feedList = [],
				this.$refs.uWaterfall.clear()
				this.getUserInfo()
			})
		},
		computed: {
			...mapState(['loginState', 'userInfo'])
		},
		methods: {
			async getUserInfo() {
				if (!this.loginState) {
					this.$refs.login.openLogin()
					return
				}
				uni.showLoading({
					title:'正在加载中'
				})
				let res = await this.$u.api.getUserInfo({
					user: this.userInfo.name
				})
				uni.hideLoading()
				if (res.statusCode === 200) {
					this.avatar = !!res.data.avatar ? res.data.avatar.url : this.userInfo.avatar
					this.bio = res.data.bio
				} else {
					this.$refs.login.openLogin()
					return
				}
				// 请求自己发布的feed数据
				let {
					data: feeds
				} = await this.$u.api.getfeed({
					type: 'users'
				})
				let feedsList = feeds.feeds.map(item => {
					return {
						...item,
						image: item.images[0] ? this.BaseFileURL + item.images[0].file : '/static/images/logo.png'
					}
				})
				this.feedList = feedsList
			},
			// 获取我的信息
			getMyInfo(){
				uni.showModal({
					title:'我的信息',
					content:'这是内容'
				})
			},
			// 打开3个点的内容
			openMore (item) {
				uni.showActionSheet({
					itemList:['删除'],
					success: async () => {
						let res = await this.$u.api.delOneFeed({
							id: item.id
						})
						console.log(res)
						if(res.statusCode === 204){
							uni.showToast({
								title:'删除成功'
							})
							uni.$emit('userIndexData')
							uni.$emit('getMineFeedList')
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	uni-nav-bar {
		position: fixed;
		width: 100%;
		height: 88upx;
		left: 0;
		top: 0;
		z-index: 9;

	}

	.header {
		position: relative;
		width: 100%;
		height: 708upx;
		background-color: #243349;

		.hbg {
			width: 300upx;
			height: 300upx;

			image {
				width: 300upx;
				height: 300upx;
			}
		}

		.setting {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 88upx;

			image {
				padding-left: 55upx;
				padding-top: 30upx;
				width: 44upx;
				height: 44upx;
			}
		}

		.personCard {
			position: absolute;
			bottom: 0;
			width: 620upx;
			height: 568upx;
			margin-left: 75upx;

			.personBox {
				width: 620upx;
				height: 568upx;
				padding-top: 70upx;
			}

			.content {
				width: 100%;
				position: absolute;
				left: 0;
				top: 70upx;
				padding: 15upx 30upx 0;

				.avater {
					width: 90upx;
					height: 90upx;
					margin-bottom: 20upx;
				}

				.user {
					height: 160upx;

					.userName {
						font-size: 40upx;
						color: #001432;
						margin-bottom: 8upx;
					}

					.userDes {
						font-size: 24upx;
						color: #757474;
					}
				}

				.btns {
					display: flex;
					justify-content: space-around;

					button {
						display: flex;
						align-items: center;
						font-size: 32upx;
						width: 260upx;
						height: 112upx;

						.icon {
							margin-right: 8upx;
							width: 40upx;
							height: 40upx;
						}
					}

					.setCircle {
						position: relative;

						.circle {
							position: absolute;
							left: 45upx;
							top: 12upx;
							width: 42upx;
							height: 36upx;
							line-height: 36upx;
							color: #fff;
							border-radius: 50%;
							background-color: red;
							z-index: 9;
						}
					}

				}
			}
		}

		.helfCilcle {
			position: absolute;
			bottom: -65upx;
			width: 100%;
			height: 200upx;
			background: url(../../static/images/half-circle.png) no-repeat;
			background-size: contain;
		}
	}

	.bottom {
		margin-top: 65upx;

		.u-waterfall {
			.itemBox {
				background-color: #f9f9f9 !important;
				width: 358upx;
				margin-bottom: 12upx;
				background-color: #FFF;
				border-radius: 20upx;

				.btnConent {
					margin-top: 10upx;
					padding-left: 10upx;

					.title {}

					.btnIcon {
						margin-top: 10upx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.icons {
							display: flex;

							.love {
								width: 32upx;
								height: 28upx;
							}

							.mes {
								width: 28upx;
								height: 28upx;
								margin-left: 15upx;
							}

						}

						.more {
							.moreIcon {
								width: 42upx;
								height: 48upx;
							}
						}
					}
				}
			}
		}
	}
</style>
